<template>
  <div>
     <div class="config">
        <div class="back" onclick="window.history.go(-1)"><img src="../assets/images/back.png" alt=""></div>
        <p>我的服务</p>
    </div>
      
            <div class="row" v-for="item in services">   
                <div class="title">         
                    <p class="title">服务名称: {{item.name}}</p>
                    <span>x{{item.num}}</span>
                </div> 
                <div class="text">
                    <p>服务介绍: {{item.des}}</p>
                </div>
            </div>
            <p v-show="services.length==0" class="none">暂无服务</p>
    
  </div>
</template>

<script>
export default {
    name: "myServices",
    data() {
        return {
            services:{}
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#fff";
    },
    mounted(){
        var qs=require("qs")
        this.axios({
            method: "post",
            url: `${this.siteUrl}/getServiceByUid`,
            data:  qs.stringify({                             
                    uid: localStorage.getItem("uid")
                })
        })
            .then(response => {
           
                if (response.data.result == 200) {
                    this.services=response.data.data;
                } else {
                    alert("请求失败");
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.row {
    background: #fff;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
   
}
.row .title{
   height: 50px;
}
.row .title p {
   float: left;
   width: 200px;
   height: 50px;
   line-height: 50px;
   padding-left: 10px;
}
.row .title span {
   float: right;
   height: 50px;
   line-height: 50px;
   padding-right: 10px;

}
.row  .text{
   
    font-size: 12px;
    padding: 0px 10px 10px 10px;
    border-bottom: 1px solid #ddd;
    color: #666
 
}
.none{
    height: 60px;
    line-height: 60px;
    text-indent: 10px;
}









</style>
